<template>
  <el-card 
    title="今日日志统计" 
    class="log-stats-overview"
    style="margin-bottom: 24px"
    v-loading="isLoading"
  >
    <el-row :gutter="16">
      <el-col :xs="24" :sm="6" v-for="(card, index) in statCards" :key="index">
        <el-card class="stats-card">
          <el-statistic
            :title="card.title"
            :value="card.value"
            :precision="card.precision"
            :suffix="card.suffix"
            :value-style="card.valueStyle"
          >
            <template #prefix>
              <el-icon :style="{ color: card.iconColor }">
                <component :is="card.icon" />
              </el-icon>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Document, Check, Warning, CircleClose } from '@element-plus/icons-vue'

interface LogStats {
  trackingLogs?: number
  businessLoopLogs?: number
  errorLogs?: number
  errors?: number
  errorRate?: number
}

interface Props {
  logStats?: LogStats | null
  isLoading?: boolean
}

const props = defineProps<Props>()

// 获取主题颜色
const getThemeColor = (colorName: string): string => {
  if (typeof window !== 'undefined') {
    return getComputedStyle(document.documentElement)
      .getPropertyValue(colorName)
      .trim() || colorName
  }
  return colorName
}

const themeColors = {
  primary: getThemeColor('--el-color-primary') || '#409eff',
  success: getThemeColor('--el-color-success') || '#67c23a',
  warning: getThemeColor('--el-color-warning') || '#e6a23c',
  error: getThemeColor('--el-color-danger') || '#f56c6c',
  heading: getThemeColor('--el-text-color-primary') || '#303133'
}

const errorRate = computed(() => {
  // 优先使用后端返回的errorRate
  if (props.logStats?.errorRate !== undefined) {
    return props.logStats.errorRate
  }
  // 如果没有，则计算
  if (!props.logStats?.trackingLogs || props.logStats.trackingLogs === 0) {
    return 0
  }
  const errors = props.logStats.errorLogs || props.logStats.errors || 0
  return ((errors / props.logStats.trackingLogs) * 100).toFixed(2)
})

const isHighErrorRate = computed(() => {
  if (!props.logStats?.trackingLogs || props.logStats.trackingLogs === 0) {
    return false
  }
  const errors = props.logStats.errorLogs || props.logStats.errors || 0
  return errors / props.logStats.trackingLogs > 0.1
})

const statCards = computed(() => [
  {
    title: '跟踪日志',
    value: props.logStats?.trackingLogs || 0,
    icon: Document,
    iconColor: themeColors.primary,
    valueStyle: { color: themeColors.heading }
  },
  {
    title: '业务闭环日志',
    value: props.logStats?.businessLoopLogs || 0,
    icon: Check,
    iconColor: themeColors.success,
    valueStyle: { color: themeColors.heading }
  },
  {
    title: '错误日志',
    value: props.logStats?.errorLogs || props.logStats?.errors || 0,
    icon: CircleClose,
    iconColor: themeColors.error,
    valueStyle: { color: themeColors.heading }
  },
  {
    title: '错误率',
    value: Number(errorRate.value),
    suffix: '%',
    icon: Warning,
    iconColor: themeColors.warning,
    valueStyle: { color: isHighErrorRate.value ? themeColors.error : themeColors.heading },
    precision: 2
  }
])
</script>

<style scoped lang="scss">
.log-stats-overview {
  border-radius: 8px;
  overflow: hidden;
}

.stats-card {
  text-align: center;
}
</style>

